<template>
  <van-dialog
    v-model="dialogVisible"
    :show-confirm-button="false"
    @closed="dialogClosed"
    @open="dialogOpen"
    class="confirm-dialog-container"
  >
    <div class="header" v-if="title">
      <div class="title">{{ title }}</div>
    </div>
    <div class="content">{{ msg }}</div>
    <div class="btn-group">
      <van-button type="primary" class="btn commit-btn" @click="sureAction">{{
        sureTitle
      }}</van-button>
      <van-button type="primary" class="btn cancel-btn" @click="cancelAction">{{
        cancelTitle
      }}</van-button>
    </div>
  </van-dialog>
</template>

<script>
export default {
  props: {
    options: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    return {
      resolve: '',
      reject: '',
      promise: '',
      dialogVisible: false,
    }
  },
  computed: {
    title() {
      let { title } = this.options
      return title || '提示'
    },
    msg() {
      let { msg } = this.options
      return msg || ''
    },
    sureTitle() {
      let { sureTitle } = this.options
      return sureTitle || '确定'
    },
    cancelTitle() {
      let { cancelTitle } = this.options
      return cancelTitle || '取消'
    },
  },
  methods: {
    show() {
      this.dialogVisible = true
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
      return this.promise
    },
    sureAction() {
      this.dialogVisible = false
      this.resolve()
    },
    dialogOpen() {},
    cancelAction() {
      this.dialogVisible = false
      this.reject('取消了')
    },
    dialogClosed() {
      this.destroy()
    },
    remove() {
      this.dialogVisible = false
    },
    destroy() {
      this.$destroy()
      document.body.removeChild(this.$el)
    },
  },
}
</script>

<style lang="scss" scoped>
.confirm-dialog-container {
  .header {
    .title {
      border-left: 6px solid $primaryColor;
      font-size: 24px;
      line-height: 24px;
      padding-left: 10px;
      margin: 20px 0 0 20px;
      color: #333333;
    }
  }
  .content {
    color: #333333;
    font-size: 28px;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn-group {
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    .btn {
      width: 169px;
      height: 54px;
      line-height: 54px;
      border-radius: 27px;
      border: 0;
      font-size: 24px;
      background: #aaaaaa;
    }
    .commit-btn {
      background: $primaryColor;
      margin-right: 80px;
    }
  }
}
.van-dialog {
  border-radius: 0;
}
</style>
